<template>
  <div class="orderlist">
    <a-card :bordered="false">
      <div style="display: flex; flex-wrap: wrap">
        <head-info
          title="订单总数"
          :content="orderList.length"
          :bordered="true"
        />
        <head-info
          title="已付款订单"
          :content="notPaid.length"
          :bordered="true"
        />
        <head-info title="已发货订单" :content="alreadyDelivered.length" />
        <head-info
          title="未发货订单"
          :content="orderList.length - alreadyDelivered.length"
        />
      </div>
    </a-card>
    <a-card
      style="margin-top: 24px"
      :bordered="true"
      title="全部订单"
      :loading="loading"
    >
      <div slot="extra">
        <a-select v-model="chosen" style="width: 200px" @change="handleChange">
          <a-select-option
            v-for="ele in config"
            :key="ele.id"
            :value="ele.value"
          >
            {{ ele.name }}
          </a-select-option>
        </a-select>
        <a-range-picker
          style="margin-left: 16px; width: 272px;"
          @change="changeDate"
        >
          <template slot="renderExtraFooter">
            选择日期筛选订单
          </template>
        </a-range-picker>
        <a-input-search
          style="margin-left: 16px; width: 272px;"
          placeholder="请输入订单编号"
          allowClear
          type="number"
          v-model="search"
          @search="searchOrder"
          @pressEnter="searchOrder"
        />
      </div>
      <a-list size="large" :loading="loading">
        <a-list-item :key="ele.id" v-for="ele in orderList">
          <a-list-item-meta :title="'订单编号:' + ele.order_id">
            <div slot="description">
              <div>
                <b style="color:orange">订单总价:{{ ele.total_price }}</b>
              </div>
            </div>
          </a-list-item-meta>
          <div slot="actions">
            <a @click="goDetail(ele.id, ele.user_id)">订单详情</a>
          </div>
          <div class="list-content">
            <div class="list-content-item">
              <span>订单商品:</span>
              <div
                v-for="item in JSON.parse(ele.goods_info)"
                :key="item.id"
                style="display:flex; flex-direction:column;overflow:auto"
              >
                <span>商品:{{ item.goods_name }}</span>
                <span>售价:{{ item.sale_price || item.price }}元</span>
                <span>数量:{{ item.num }}件</span>
              </div>
            </div>
            <div class="list-content-item">
              <span>状态:</span>
              <div>
                <a-tag :color="orderStatus(ele.status).color">{{
                  orderStatus(ele.status).name
                }}</a-tag>
              </div>
            </div>
            <div class="list-content-item">
              <span>{{ ele.payment_time ? '支付时间' : '下单时间' }}</span>
              <p>{{ ele.payment_time ? ele.payment_time : ele.order_time }}</p>
            </div>
            <div class="list-content-item">
              <span>商家:{{ ele.shops_name }}</span>
            </div>
          </div>
        </a-list-item>
      </a-list>
      <a-pagination
        showSizeChanger
        :default-current="current"
        :defaultPageSize="pageSize"
        :total="total"
        :showTotal="() => `共${showTotal}条`"
        v-show="orderList.length"
        @change="pageChange"
        @showSizeChange="showSizeChange"
        style="margin: 10px auto;float: right"
      />
    </a-card>
  </div>
</template>

<script>
import HeadInfo from '@/pages/components/detail/HeadInfo';
import { getOrderList } from '@/services/shopApi/order';
import moment from 'moment';
const config = [
  {
    id: '9',
    value: '',
    name: '全部',
  },
  {
    id: '10',
    value: '0',
    name: '已过期',
  },
  {
    id: '1',
    value: '1',
    name: '已下单',
  },
  {
    id: '2',
    value: '2',
    name: '已支付',
    color: '#87d068',
  },
  {
    id: '3',
    value: '3',
    name: '已发货',
    color: '#108ee9',
  },
  {
    id: '4',
    value: '4',
    name: '退货中',
    color: 'cyan',
  },
  {
    id: '5',
    value: '5',
    name: '退款中',
    color: 'orange',
  },
  {
    id: '6',
    value: '6',
    name: '已完成',
    color: 'blue',
  },
  {
    id: '7',
    value: '7',
    name: '已取消',
  },
  {
    id: '8',
    value: '-1',
    name: '已删除',
    color: '#f50',
  },
];
export default {
  name: 'orderList',
  components: { HeadInfo },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem('user'));
    this.filter.project_id = this.userInfo.project_id;
    this.order({ project_id: this.userInfo.project_id });
    this.loading = false;
  },
  data() {
    return {
      userInfo: '',
      search: '',
      orderList: [],
      loading: true,
      chosen: '',
      config,
      showTotal: '',
      total: 0,
      pageSize: 10,
      current: 1,
      filter: {},
    };
  },
  computed: {
    notPaid() {
      const notPaidArr = this.orderList.filter((ele) => {
        return ele.status == '2';
      });
      return notPaidArr;
    },
    alreadyDelivered() {
      const alreadyDeliveredArr = this.orderList.filter((ele) => {
        return ele.status == '3';
      });
      return alreadyDeliveredArr;
    },
  },

  methods: {
    goDetail(id, user) {
      this.$router.push({
        name: '订单详情',
        params: { id },
        query: { user_id: this.userInfo.id },
      });
    },
    pageChange(pageNumber, pageSize) {
      this.loading = true;
      this.current = pageNumber;
      let params = {};
      params.page = pageNumber;
      params.limit = pageSize;
      this.order(params);
    },
    showSizeChange(current, size) {
      this.loading = true;
      let params = {};
      this.pageSize = size;
      params.page = current;
      params.limit = size;
      params.user_id = this.userInfo.id;
      this.order(params);
    },
    orderStatus(status) {
      let feedback = this.config.filter((ele) => {
        if (ele.value == status) {
          return ele;
        }
      });
      return feedback[0];
    },
    order(params) {
      getOrderList(params)
        .then((res) => {
          this.total = this.showTotal = res.result.count;
          this.orderList = res.result.rows.map((ele) => {
            if (ele.order_time || ele.payment_time) {
              ele.order_time = moment(new Date(Number(ele.order_time))).format(
                'YYYY-MM-DD  HH:mm:ss'
              );
            }
            if (ele.payment_time) {
              ele.payment_time = moment(Number(ele.payment_time)).format(
                'YYYY-MM-DD  HH:mm:ss'
              );
            }
            return ele;
          });
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.msg);
        });
    },
    handleChange() {
      this.loading = true;
      this.filter.status = this.chosen;

      this.order(this.filter);
    },
    searchOrder() {
      if (this.search == '') {
        this.$message.warn('请输入订单编号');
        return;
      }
      this.loading = true;
      this.order({ order_id: this.search, project_id: this.userInfo.id });
    },
    changeDate(date, dateStr) {
      this.filter.start = dateStr[0];
      this.filter.end = dateStr[1];
      this.order(this.filter);
    },
  },
};
</script>

<style lang="less" scoped>
.list-content-item {
  color: @text-color-second;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;

  span {
    line-height: 20px;
  }

  p {
    margin: 4px 0 0;
    line-height: 22px;
  }
}
</style>
